<!-- 选择模板 -->
<!-- 选择模板 -->
<template>
  <el-drawer v-model="drawerVisible" style="--el-drawer-padding-primary: 0" :size="858" appendToBody destroyOnClose :withHeader="false">
    <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
      <div class="head-box">
        <div class="left-box">
          <base-input-search
            v-model="filterData.templateName"
            clearable
            placeholder="请输入模板名称"
            style="width: 100%"
            maxlength="30"
            :prefixIcon="IconSearch"
            @submit="getBaseDataAxios(true)"
          ></base-input-search>
          <bubble-select-local
            v-model="filterData.isDefault"
            labelKey="label"
            valueKey="value"
            :filterable="false"
            style="width: 100%"
            :list="[
              { label: '全部模版', value: '' },
              { label: '默认模版', value: 1 },
              { label: '非默认模版', value: 0 },
            ]"
            placeholder="请选择是否默认模版"
            @change="getBaseDataAxios(true)"
          ></bubble-select-local>
          <div style="display: flex; align-items: center; justify-content: flex-end; width: 100%">
            <el-button link type="primary" @click="openPromotionTemplateList">都没有?去新增模板</el-button>
          </div>
        </div>
      </div>
      <div style="flex: 1; width: 100%; overflow: hidden">
        <base-skeleton v-if="pageLoad.loadState === true" style="width: 100%; height: 100%; padding: 0 20px"></base-skeleton>
        <el-scrollbar v-else-if="pageLoad.loadState === false">
          <div class="module-list">
            <div v-for="template in tableData" :key="template.productTemplateId" class="module-item" @click="submit(template)">
              <page-simulation-template :selectIndex="template.selectIndex" :templateProductList="template.productList"></page-simulation-template>
              <div style="display: flex; flex: 1; flex-direction: column; padding: 15px 10px; padding-bottom: 0">
                <div class="info-box">
                  <div class="title-box">
                    <span class="title">{{ template.templateName }}</span>
                  </div>
                  <div style="display: flex; flex-direction: column">
                    <el-tag v-if="template.templateType === 1" key="el-tag-1" type="primary">K币充值</el-tag>
                    <el-tag v-else-if="template.templateType === 2" key="el-tag-2" type="warning">会员充值</el-tag>
                    <el-tag v-else-if="template.templateType === 4" key="el-tag-3" type="success">播放解锁</el-tag>
                    <template v-if="template.isDefault === 1">
                      <el-tag v-if="template.isFirstRecharge === 1" key="tag-4" class="violet-tag">复购默认</el-tag>
                      <el-tag v-else key="tag-5" class="cyan-tag">首充默认</el-tag>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <base-empty
          v-else
          style="height: 100%"
          :description="pageLoad.description || ''"
          :imageSize="240"
          :loadState="pageLoad.loadState"
          :pageLoadButton="[{ text: '重新加载', callBack: getBaseDataAxios }]"
        ></base-empty>
      </div>
      <div class="pagination-box">
        <el-pagination
          v-model:currentPage="filterData.current"
          v-model:pageSize="filterData.size"
          :pageSizes="[20, 30, 40, 50]"
          :disabled="pageLoad.loadState === true"
          :pagerCount="13"
          layout="total, prev, pager, next, sizes, jumper"
          :total="baseData.total"
          @change="getBaseDataAxios(true)"
        ></el-pagination>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
  import IconSearch from '~icons/ep/search';

  import { type ReferralTemplate, type ReferralTemplateListRequest, getReferralTemplateListNewAxios } from '@/api/marketing-management';

  type $ShowData = {
    /** 模版类型：1-充值虚拟币；2-购买会员；4-购买全集； */
    templateType: 1 | 2 | 4;
    /** 选择后的回调 */
    selectCallBack?: (template: ReferralTemplate) => void;
  };
  let selectCallBack: $ShowData['selectCallBack'] = undefined;
  const router = useRouter();
  const drawerVisible = ref(false);
  const baseData = shallowReactive({
    /** 总数量 */
    total: 0,
  });

  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });
  const filterData: Ref<ReferralTemplateListRequest> = ref<ReferralTemplateListRequest>({
    isDefault: undefined,
    templateName: '',
    templateType: 1,
    current: 1,
    size: 40,
  });

  const tableData: Ref<ReferralTemplate[]> = ref([]);
  const description = ref('');

  /**
   * 设置表格数据
   */
  async function getBaseDataAxios(showLoading = true) {
    try {
      await nextTick();
      pageLoad.loadState = Boolean(showLoading);
      const res = await getReferralTemplateListNewAxios(filterData.value);
      tableData.value = res.data.records;
      description.value = '暂无数据';
      filterData.value.current = res.data.current;
      filterData.value.size = res.data.size;
      baseData.total = res.data.total;
      pageLoad.loadState = false;
    } catch (error) {
      tableData.value = [];
      pageLoad.loadState = 'err';
      pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
    }
  }

  /**
   * 提交
   */
  function submit(template: ReferralTemplate) {
    try {
      typeof selectCallBack === 'function' && selectCallBack(template);
      hide();
    } catch (error) {
      ElToast.error(error.msg || '提交失败，-BD001');
    }
  }

  /**
   * 打开推广模版链接
   */
  function openPromotionTemplateList() {
    router.push('/marketing-management/promotion-template-list');
  }

  /**
   * 显示
   */
  function show(data: $ShowData) {
    filterData.value.templateType = data.templateType;
    selectCallBack = 'selectCallBack' in data && typeof data.selectCallBack === 'function' ? data.selectCallBack : undefined;
    drawerVisible.value = true;
    getBaseDataAxios();
  }

  /**
   * 隐藏
   */
  function hide() {
    drawerVisible.value = false;
  }

  defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
  .head-box {
    @include flex(row, nowrap, flex-start, center, center);
    width: 100%;
    height: 80px;
    padding: 15px;
    overflow: hidden;

    .left-box {
      display: grid;
      flex: 1;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      grid-gap: 15px;
      margin-right: 15px;
    }
  }

  .module-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 259px);
    grid-gap: 25px;
    padding: 0 15px;
    padding-bottom: 15px;

    .module-item {
      overflow: hidden;
      cursor: pointer;
      background: $c-bg-block;
      border-radius: 10px;
      box-shadow: var(--my-box-shadow-fill);
    }

    .info-box {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-start;
      padding-bottom: 15px;

      .title-box {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: flex-start;
        min-height: 38px;
        margin-right: 8px;

        .title {
          display: -webkit-box;
          overflow: hidden;
          font-size: 16px;
          font-weight: bold;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
        }
      }
    }
  }

  .pagination-box {
    @include flex(row, nowrap, center, center, center);
    height: 80px;
    padding: 15px;
    overflow: hidden;
  }

  .violet-tag {
    --el-tag-text-color: var(--el-color-violet);
    --el-tag-bg-color: var(--el-color-violet-light-9);
    --el-tag-border-color: var(--el-color-violet-light-8);
    margin-top: 4px;
  }

  .cyan-tag {
    --el-tag-text-color: var(--el-color-cyan);
    --el-tag-bg-color: var(--el-color-cyan-light-9);
    --el-tag-border-color: var(--el-color-cyan-light-8);
    margin-top: 4px;
  }
</style>
